﻿@model Noodles.Core.Model.BlogPost

@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

<style>
.edit-set {
    width: 440px;
    padding: 6px 10px 14px 10px;
    background-color: #F5E6C9;
    margin-left: 30px;
    border: 3px double #8F8F8F;
}
/*-----------------------------------------------------------------------------------------------*/
/*                                            TOOLTIP                                            */
/*-----------------------------------------------------------------------------------------------*/

.toolTip { /* This is the hook that the jQuery script will use */
	padding-right: 20px; /* This is need to make sure that the help icon is always visible */
	background: transparent url(../../../../Content/images/help.gif) no-repeat right;
	color: #3366FF;
	cursor: help; 
	position: relative; /* This contains the .toolTipWrapper div that is absolutely positioned  */
}

	.toolTipWrapper { /* The wrapper holds its insides together */
		width: 175px;
		position: absolute; /* Absolute will make the tooltip float above other content in the page */
		top: 20px;
		display: none; /* It has to be displayed none so that the jQuery fadein and fadeout functions will work */
		color: #FFF;
		font-weight: bold;
		font-size: 9pt; /* A font size is needed to maintain consistancy */
	}
	
		.toolTipTop { /* Top section of the tooltip */
			width: 175px;
			height: 30px;
			background: transparent url(images/bubbleTop.gif) no-repeat;
		}

		.toolTipMid { /* Middle section of the tooltip */
			padding: 8px 15px;
			background: #A1D40A url(images/bubbleMid.gif) repeat-x top;
		}
		
		.toolTipBtm { /* Bottom Section of the tooltip */
			height: 13px;
			background: transparent url(images/bubbleBtm.gif) no-repeat;
		}
		
</style>

<script type="text/javascript">

    tinyMCE.init({
        mode: "exact",
        theme: "advanced",
         width : "600",
    height : "300"
    });
    tinyMCE.execCommand('mceAddControl', false, 'PostData');
    tinyMCE.execCommand('mceAddControl', false, 'Description');
    $('#Title').click(function () {
        alert('hiii');
        $('.toolTip').toggle();
    });

  
</script>

                    <style>
                    .Hidden { display:none; }
                    </style>
                    <div id="modalCategory"/>
                    <article class="module width_full">
            @using (Html.BeginForm())
            {
			            <header><h3>New Blog Post</h3></header>
                    
                    
				<div class="module_content">
						<fieldset>
							<label>Post Title</label>
                            <span class="toolTip" title="This Title will apear in the Page"></span>
                            @Html.TextBoxFor(x => x.Title)
							
						</fieldset>
                        <fieldset>
							<label>Post Description</label>
                            <span class="toolTip" title="This Description will appear in the main page"></span>
                            @Html.TextAreaFor(x => x.Description, new { rows = 4, cols = 10 })
							
						</fieldset>
						<fieldset>
							<label>Content</label>
                              <span class="toolTip" title="This is the main article.It will be sown with comments form"></span>
                               @Html.TextAreaFor(x => x.PostData, new { rows = 12, cols = 10 })						
						</fieldset>
					
                            	<fieldset style="width:48%; float:left; margin-right: 3%;"> <!-- to make two field float next to one another, adjust values accordingly -->
							<label>Category</label>
							   @Html.DropDownListFor(x => x.CatID, ((SelectList)ViewData["ListItemsCategories"]), "--Please Select--")
						</fieldset>
						<fieldset style="width:48%; float:left;"> <!-- to make two field float next to one another, adjust values accordingly -->
							
                              @Html.ActionLink("New category", "Index", "Category", null, new { @id = "showFancyBox", @class = "fancybox" })
                             <div class="clear"></div>	                             
                              <div id="ajaxResult"></div>
						</fieldset><div class="clear"></div>		
                        <fieldset>
                          <label>Tags</label>
                               @Html.TextBoxFor(x => x.Tags)
                        </fieldset>
				    </div>
			        <footer>
				        <div class="submit_link">
					      @*  <select>
						        <option>Draft</option>
						        <option>Published</option>
					        </select>*@
                           @* @Html.CheckBox("SampleChkIntBool", Model == null ? false : ( Model.IsHomePage == true? true : false ), new { @value = "true" })*@
                            <label>can user Comment ? </label>
                                 @Html.CheckBoxFor(x => x.IsCommentable, new { @value = "true",@class="chkCommentable" })

                                <label>Publich to Home Page</label>
                                 @Html.CheckBoxFor(x => x.IsHomePage, new { @value = "true",@class="chkHomePage" })
                            <label>Select Status</label>
                             @Html.DropDownListFor(x => x.IsActive, ((SelectList)ViewData["blogStatus"]), "--Please Select--")

                        
                              <label>Select Page</label>
                               @Html.DropDownListFor(x => x.PageID, ((SelectList)ViewData["ListItemsPages"]), "--Please Select--", new {@class="drpPageClass" })
					        <input type="submit" value="Publish" class="alt_btn">
					        <input type="submit" value="Reset">
				        </div>
			        </footer>
            }
		</article>
       
        <div id="ModalDialog" title="" class="ui-widget-overlay"></div>
        <script type="text/javascript">  
        
            $(".chkHomePage").click(function () {
                if ($(this).attr("checked") == "true") {
                    $(".drpPageClass").attr("disabled", "disabled");
                }
                else {
                    $(".drpPageClass").removeAttr("disabled");
                }
                //

            });

            $(document).ready(function () {
                $("#showFancyBox").fancybox({
                    'width': '200px',
                    'height': '45%'
                });

            });
          
        </script>



